接續上一篇文章，繼續將 Firebase Authentication 電話驗證的串接完成！

關於 Firebase Authentication 的電話驗證設定可以看這篇文章

順一次驗證流程

頁面都完成以後，接下來可以試想整個驗證流程(回想使用過的網站都是如何呈現)的順序。我這邊初步是以「輸入電話號碼→驗證電話號碼格式→出現開始驗證按鈕→點擊開始驗證→出現勾選不是機器人的介面→勾選不是機器人→發送驗證碼並出現驗證碼填寫的欄位→使用者輸入驗證碼完成按下確認驗證碼→進行驗證」來規劃。

我的專案是將電話驗證環節設計在「店家角色註冊後，資料維護的頁面」與「顧客角色登入後，要預約服務的當下」。

1. 先定義一些需要的 state 值來控制頁面的即時呈現效果

const [showOTPGenerateArea, setShowOTPGenerateArea] = useState(false);
const [showOTPInput, setShowOTPInput] = useState(false);
const [confirmObj, setConfirmObj] = useState({});
const [isCorrectOTP, setIsCorrectOTP] = useState(false);

2. 在畫面渲染區塊，使用 state 值寫判斷

開始電話驗證第一步

依照個人喜好看是否要有機器人驗證，我選擇要！

1. 依個人畫面渲染要放機器人的區塊
   那個常見的「我不是機器人」區塊在 Firebase 裡被定義為 recaptcha-container，所以一定要在你想要放的 tag 上加上這個 id，讓它有地方 render 出來。

{showOTPGenerateArea === true &&
  <div className="col-span-12">
    <div className="grid grid-cols-12 gap-x-6 gap-y-2">
      <div className="col-span-5">
        <a onClick={getRobot} style={{lineHeight: '40px', color: '#3766d3'}}>開始驗證</a>
      </div>
      <div className="col-span-12">
        <div id="recaptcha-container" />
      </div>
    </div>
  </div>
}

2. 撰寫呼叫的 function
   當使用者點選「開始驗證」，就觸發 getRobot ，適當加入需要的判斷後就可以呼叫第4點的 setUpRecaptha。

const getRobot = async(e) => {
    e.preventDefault();

    try {
      showNotify("success", "嗨！人類");
      const response = await setUpRecaptha(countryPhone);
    } catch (err) {
      console.log(err);
      showNotify("error", "目前無法驗證");
    }
};

3. 讓「我不是機器人」區塊成功 render
   recaptchaVerifier 就是官方定義呼叫機器人區塊的生成實例，signInWithPhoneNumber 則是使用電話號碼驗證的方法，所以事先都要記得引入。當使用者勾選後，就會呼叫 signInWithPhoneNumber 方法，發送一組6位數的驗證碼到他填寫的手機裡。

import { RecaptchaVerifier, signInWithPhoneNumber  } from "firebase/auth";

const setUpRecaptha = (phoneNumber) => {
    const recaptchaVerifier = new RecaptchaVerifier(
      auth,
      "recaptcha-container",
      {}
    );
    recaptchaVerifier.render();
    return signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
};

Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')

如果看到上述這段錯誤訊息，請再看一次第 3 點的內容！

StackOverflow 的相關問題與解答：Firebase otp recaptcha error: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')

使用者成功收到驗證碼簡訊後

1. 當驗證碼發送成功，畫面會渲染出讓使用者填寫驗證碼的區塊

{showOTPInput === true &&
  <div className="col-span-12">
    <div className="grid grid-cols-12 gap-x-6 gap-y-2">
      <div className="col-span-7">
        <FormInput text="簡訊驗證碼" type="number" id="OTPCode" labelText="簡訊驗證碼" onChange={onChange} required  />
      </div>
      <div className="col-span-5">
        <a onClick={verifyOtp} style={{lineHeight: '40px', color: '#3766d3'}}>確認驗證碼</a>
      </div>
    </div>
  </div>
}

2. 新增呼叫確認驗證碼的 function
   此時我也會將「我不是機器人」區塊隱藏掉。

const verifyOtp = async (e) => {
    e.preventDeault();
    setShowOTPInput(false);

    if (formData.OTPCode === "" || formData.OTPCode === null) return;
    try {
      await confirmObj.confirm(formData.OTPCode);
      showNotify("success", "太棒了！已完成手機認證");
      setIsCorrectOTP(true)
    } catch (err) {
      setIsCorrectOTP(false);
      showNotify("error", err.message);
    }
};

完成電話驗證的畫面

下圖就是我實際串接後，完成的部分畫面截圖。

小結

今天完成了這個專案最大的挑戰(？)應該算是啦，因為其它就是 CRUD 、商業邏輯與組裝畫面並實作，雖然目前都覺得時程安排的不是很好，但努力一點還是有機會在時間內完成的！
以上小結是當工程師之後，很常對自己說的話，給自己鼓勵與肯定，在專案與需求開發時適當取捨，時間到之前都不會鬆懈、持續拚盡全力，與大家共勉之。